<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>23432</title>
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link href="/static/lib/layui/css/layui.css" rel="stylesheet"/>
    <link href="/static/lib/layui/lay/step_lay/step.css" rel="stylesheet">

        <link type="text/css" rel="stylesheet" href="/static/css/metroStyle.css">
    <link type="text/css" rel="stylesheet" href="/static/css/treeSelectStyle.css">
    <script src="/static/js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery.ztree.all.js"></script>
    <script type="text/javascript" src="/static/js/treeSelect.2.0.js"></script>
    <script type="text/javascript" src="/static/js/xm-select.js"></script>
    <style type="text/css">
        html{
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-body" style="padding-top: 10px;padding-bottom: 50px;">
                <div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;">
                    <div carousel-item>
                        <div>
                            <form class="layui-form" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">选择客户:</label>
                                    <div class="layui-input-block" id="customer" name="customer">

                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button class="layui-btn" lay-submit lay-filter="formStep">
                                            &emsp;下一步&emsp;
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div>
                            <form class="layui-form" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">签约主体:</label>
                                    <div class="layui-input-block" id="company" name="company">

                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">业务类型:</label>
                                    <div class="layui-input-block" id="type" name="type">

                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">项目金额:</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="money" id="money" lay-verify="money|number" placeholder="请输入项目金额<元>"
                           autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline layui-col-md6">
                                    <label class="layui-form-label">出具报告:</label>
                                    <div class="layui-input-block">
                                        <input type="checkbox" id="is_issue" name="is_issue" lay-skin="switch"
                                               lay-text="出具|不出具" checked="checked">
                                    </div>
                                </div>
                                <div class="layui-form-item" style="padding-top: 10px;">
                                    <div class="layui-input-block">
                                        <button type="button" class="layui-btn layui-btn-primary pre">上一步</button>
                                        <button class="layui-btn" lay-submit lay-filter="formStep1">
                                            &emsp;下一步&emsp;
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div>
                            <form class="layui-form" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">承做部门:</label>
                                    <div class="layui-input-block" id="dept" name="dept">

                                    </div>
                                </div>
                                 <div class="layui-form-item">
                                    <label class="layui-form-label">项目负责人:</label>
                                    <div class="layui-input-block" id="user" name="user">

                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">签约日期:</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="date" id="date" lay-verify="required" placeholder="请选择签订日期"
                           autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">备注:</label>
                                    <div class="layui-input-block">
                                        <textarea name="remark" placeholder="请输入备注内容" class="layui-textarea"></textarea>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button type="button" class="layui-btn layui-btn-primary pre">上一步</button>
                                        <button class="layui-btn" lay-submit lay-filter="formStep2">
                                            &emsp;下一步&emsp;
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div>
                            <form class="layui-form" style="margin: 0 auto;max-width: 560px;">
                                <div class="layui-form-item" style="margin-bottom: 0px;">
                                    <label class="layui-form-label">选择客户:</label>
                                    <div class="layui-input-block layui-form-mid layui-word-aux" style="float: none;" id="query_customer" name="query_customer">

                                    </div>
                                </div>
                                <div class="layui-form-item" style="margin-bottom: 0px;">
                                    <label class="layui-form-label">签约主体:</label>
                                    <div class="layui-input-block layui-form-mid layui-word-aux" style="float: none;" id="query_company" name="query_company">

                                    </div>
                                </div>
                                <div class="layui-form-item" style="margin-bottom: 0px;">
                                    <label class="layui-form-label">业务类型:</label>
                                    <div class="layui-input-block layui-form-mid layui-word-aux" style="float: none;" id="query_type" name="query_type">

                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">项目金额:</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="query_money" id="query_money" autocomplete="off" class="layui-input layui-word-aux" style="border: none;">
                                    </div>
                                </div>
                                <div class="layui-form-item" style="margin-bottom: 0px;">
                                    <label class="layui-form-label">承做部门:</label>
                                    <div class="layui-input-block layui-form-mid layui-word-aux" style="float: none;" id="query_dept" name="query_dept">

                                    </div>
                                </div>
                                <div class="layui-form-item" style="margin-bottom: 0px;">
                                    <label class="layui-form-label">项目负责人:</label>
                                    <div class="layui-input-block layui-form-mid layui-word-aux" style="float: none;" id="query_user" name="query_user">

                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">签约日期:</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="query_date" id="query_date" class="layui-input layui-word-aux" style="border: none;">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button type="button" class="layui-btn layui-btn-primary pre">上一步</button>
                                        <button class="layui-btn" lay-submit lay-filter="formStep3">
                                            &emsp;确定信息&emsp;
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div>
                            <div style="text-align: center;margin-top: 90px;">
                                <i class="layui-icon layui-circle"
                                   style="color: white;font-size:30px;font-weight:bold;background: #52C41A;padding: 20px;line-height: 80px;">&#xe605;</i>
                                <div style="font-size: 24px;color: #333;font-weight: 500;margin-top: 30px;">
                                    创建成功，恭喜签约！
                                </div>
                                <div style="font-size: 14px;color: #666;margin-top: 20px;">附注说明文档！</div>
                            </div>
                            <div style="text-align: center;margin-top: 50px;">
                                <button class="layui-btn next">再次创建</button>
                                <button class="layui-btn layui-btn-primary" id="close">关闭窗口</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="/static/lib/layui/layui.js"></script>
    <script src="/static/lib/layui/lay/step_lay/step.js"></script>
    <script>
        layui.config({
            base:'/static/lib/layui/lay/step_lay/'
        }).use([ 'form', 'step','laydate','upload','element','layer','okUtils','okLayer'], function () {
            var $ = layui.$;
            var form = layui.form
            var step = layui.step
            var laydate = layui.laydate
            var upload = layui.upload
            var layer = layui.layer
            var okLayer = layui.okLayer
            var okUtils=layui.okUtils
            var element = layui.element
            step.render({
                elem: '#stepForm',
                filter: 'stepForm',
                width: '100%', //设置容器宽度
                stepWidth: '750px',
                height: '500px',
                stepItems: [{
                    title: '选择一名客户'
                }, {
                    title: '填写约定书信息'
                }, {
                    title: '填写作业信息'
                }, {
                    title: '确定信息'
                },{
                    title: '完成'
                }]
            });
            laydate.render({
                elem: '#date',
                type:'date',
                trigger:'click'
            })
            // 第一步
            var onestep_data=[]
            form.on('submit(formStep)', function (data) {
                if(onestep_data.length>0){
                    onestep_data.splice(0,onestep_data.length);
                    onestep_data.push(data.field)
                }else{
                    onestep_data.push(data.field)
                }
                step.next('#stepForm');
                return false;
            });
            // 第二步
            var twostep_data=[]
            form.on('submit(formStep1)', function (data) {
                if (data.field.is_issue === "on") {
                    data.field.is_issue = 0;
                } else {
                    data.field.is_issue = 1;
                }
                 if(twostep_data.length>0){
                    twostep_data.splice(0,twostep_data.length);
                    twostep_data.push(data.field)
                }else{
                    twostep_data.push(data.field)
                }
                step.next('#stepForm');
                return false;
            });
            // 第三步
            var threestep_data=[]
            form.on('submit(formStep2)', function (data) {
                if(threestep_data.length>0){
                    threestep_data.splice(0,threestep_data.length);
                    threestep_data.push(data.field)
                }else{
                    threestep_data.push(data.field)
                }
                // 这里显示数据
                $('#query_customer').text($('#customer').text().split("/")[0])
                $('#query_company').text($('#company').text().split("全选")[0])
                $('#query_type').text($('#type').text().split("全选")[0])
                $('#query_money').val($('#money').val())
                $('#query_dept').text($('#dept').text().split("全选")[0])
                $('#query_user').text($('#user').text().split("-")[0])
                $('#query_date').val($('#date').val())
                step.next('#stepForm');
                return false;
            });
            // 第四步
            form.on('submit(formStep3)', function (data) {
                console.log(twostep_data)
                var dict = {}
                dict['customer'] = onestep_data[0].customer
                dict['company'] = twostep_data[0].company
                dict['type'] = twostep_data[0].type
                dict['money'] = twostep_data[0].money
                dict['is_issue'] = twostep_data[0].is_issue
                dict['dept'] = threestep_data[0].dept
                dict['user'] = threestep_data[0].user
                dict['date'] = threestep_data[0].date
                // 从这里提交数据到后台
                okUtils.ajax("{% url 'business:contracts_insert' %}", "post", dict, true).done(function (response) {
                        //step.next('#stepForm');
                        //return false;
                }).fail(function (error) {
                     这里已经有提示了
                });
                return false;
            });
            $('.pre').click(function () {
                step.pre('#stepForm');
            });

            $('.next').click(function () {
                step.next('#stepForm');
            });
            $('#close').click(function () {
                let index = parent.layer.getFrameIndex(window.name); //获取当前窗口的name
                parent.layer.close(index);
            })
            // 上传附件
            form.verify({
                money:function (value) {
                    if(value<0){
                        return '金额不允许为负数！'
                    }
                    if(value===0){
                        return '金额为必填项，不能为空！'
                    }
                    var result=value.toString().indexOf(".")
                    if (result !== -1) {
                        var newvalue = value.toString().split('.')[1]
                        if (newvalue.length > 4) {
                            return '只允许保存小数点后4位！'
                        }
                    }
                }
            })
        })
    </script>
<script>
    var demo1 = xmSelect.render({
        el: '#customer',
        name:'customer',
        radio: true,
        tips: '选择一名客户，可搜索客户名称',
        filterable: true,
        paging: true,
        pageSize: 3,
        clickClose: true,
        layVerify: 'required',
        layVerType: 'msg',
        toolbar: {show: true},
        prop: {
            name: 'cus_audited_object',
            value: 'id',
        },
        data: []
    })
    $.ajax({
        url: "{% url 'business:customers_list1' %}",
        type: "GET",
        success: function (ret) {
            var node = ret;
            demo1.update({
                data: node.data,
                autoRow: true,
            })
        },
        error: function () {
        }
    });
</script>
<script>
    var demo2 = xmSelect.render({
        el: '#company',
        name:'company',
        radio: true,
        tips: '选择一名主体，可搜索主体名称',
        filterable: true,
        clickClose: true,
        layVerify: 'required',
        layVerType: 'msg',
        toolbar: {show: true},
        data: [],
        prop: {
            name: 'dept_name',
            value: 'id',
        },
    })
    $.ajax({
        url: "{% url 'config:depts_list2' %}",
        type: "GET",
        success: function (ret) {
            var node = ret;
            demo2.update({
                data: node.data,
                autoRow: true,
            })
        },
        error: function () {
        }
    });
</script>
<script>
    var demo3 = xmSelect.render({
        el: '#type',
        name:'type',
        radio: true,
        tips: '选择一种业务类型，可搜索业务类型！',
        filterable: true,
        clickClose: true,
        layVerify: 'required',
        layVerType: 'msg',
        tree: {
            show: true,
            strict: true,
        },
        prop: {
            name: 'type_name',
            value: 'id',
        },
        toolbar: {show: true},
        data: []
    })
    $.ajax({
        url: "{% url 'business:type_list1' %}",
        type: "GET",
        success: function (ret) {
            var node = ret;
            demo3.update({
                data: node.data,
                autoRow: true,
                iconfont: {
                    parent: 'hidden',
                }
            })
        },
        error: function () {
        }
    });
</script>
<script>
    var demo4 = xmSelect.render({
        el: '#dept',
        name:'dept',
        tips: '选择承做部门！',
        filterable: false,
        clickClose: false,
        layVerify: 'required',
        layVerType: 'msg',
        tree: {
            show: true,
            strict: true,
        },
        prop: {
            name: 'dept_name',
            value: 'id',
        },
        toolbar: {show: true},
        data: []
    })
    $.ajax({
        url: "{% url 'config:depts_list1' %}",
        type: "GET",
        success: function (ret) {
            var node = ret;
            demo4.update({
                data: node.data,
                autoRow: true,
                iconfont: {
                    parent: 'hidden',
                }
            })
        },
        error: function () {
        }
    });
</script>
<script>
    var demo5 = xmSelect.render({
        el: '#user',
        name:'user',
        radio: true,
        tips: '选择项目负责人！',
        clickClose: true,
        filterable: true,
        paging: true,
        pageSize: 3,
        layVerify: 'required',
        layVerType: 'msg',
        prop: {
            name: 'showname',
            value: 'id',
        },
        toolbar: {show: false},
        data: []
    })
    $.ajax({
        url: "{% url 'users:users_list1' %}",
        type: "GET",
        success: function (ret) {
            var node = ret;
            demo5.update({
                data: node.data,
                autoRow: true,
                iconfont: {
                    parent: 'hidden',
                }
            })
        },
        error: function () {
        }
    });
</script>
</body>
</html>
